import { ElDialog, ElInput, ElButton } from "element-plus";
import { defineComponent, createVNode, render, reactive } from "vue";
const DialogComponent = defineComponent({
    props: {
        option: {type: Object}
    },
    setup(props,ctx) {
        const state = reactive({
            option: props.option,
            isShow: false
        });
        ctx.expose({
            showDialog() {
                state.option = props.option;
                state.isShow = true;
            }
        })
        const onCancel = () => {
            state.isShow = false; 
        }
        const onConfirm = () => {
            state.isShow = false; 
            state.option.onConfirm && state.option.onConfirm(state.option.content)
        }
        return () => {
            return <ElDialog v-model={state.isShow} title={state.option.title}>
                {{
                    default: ()=><ElInput type="textarea" v-model={state.option.content} rows={10}></ElInput>,
                    footer:()=>state.option.footer && <div>
                        <ElButton onClick={()=> onCancel()}>取消</ElButton>
                        <ElButton onClick={()=> onConfirm()}>确定</ElButton>
                    </div>       
                }}
            </ElDialog>
        }
    }
})
let vm;
export function $dialog(option) {
   if(!vm){
    let el = document.createElement('div');
    // 将组件渲染
    let vm = createVNode(DialogComponent, {option}); // 将组件渲染成虚拟节点
    // 这里需要将el渲染到页面中    
    document.body.appendChild((render(vm, el), el));    // 渲染成真实节点
    let { showDialog } = vm.component.exposed;
    showDialog(option);
   }
}